<script setup>
import { usePlayerStateStore } from "@/stores/playerState.js";
import { useAppStateStore } from "@/stores/appState.js";

const appState = useAppStateStore();
const playerState = usePlayerStateStore();

function reset(){
    appState.$reset();
    playerState.$reset();
}

// function debug(){
//     console.log("curPlayList:",playerState.curPlayList);
//     console.log("favoriteMusics:",playerState.favoriteMusics);
//     console.log("localMusics:",playerState.localMusics);
// }

// function debug_user(){
//     playerState.userPlayLists.forEach(pl => {
//         console.log("pl:",pl.name, pl.tag, pl.list);
//     });
// }
</script>
<template>
    <n-h1>设置</n-h1>
    <div class="p-4">
        <n-form label-placement="left" label-width="auto" :model="appState">
            <n-form-item label="重置Player:" path="reset">
                <n-button type="primary" @click="reset">重置列表</n-button>
                <!-- <n-button  @click="debug">Debug</n-button> -->
                <!-- <n-button  @click="debug_user">User List</n-button> -->
            </n-form-item>
            <n-form-item label="默认系统缩放:" path="appZoom">
                <n-input-number v-model:value="appState.appZoom" :min="50" :max="200" :step="10" placeholder="缩放比例"
                    title="缩放比例">
                    <template #suffix> % </template>
                </n-input-number>
                &nbsp;
                <n-button type="primary" @click="appState.appZoom = 100">还原</n-button>
            </n-form-item>
            <n-form-item label="默认窗口大小:" path="appSize">
                <n-input-number v-model:value="appState.appSize.width" :min="600" :max="4096" placeholder="宽度"
                    title="宽度" />
                &nbsp;
                <n-input-number v-model:value="appState.appSize.height" :min="400" :max="2048" placeholder="高度"
                    title="高度" />
                &nbsp;
                <n-button type="primary" @click="appState.setWinSize">应用</n-button>
            </n-form-item>
        </n-form>
    </div>
</template>

<style scoped></style>
